<template>
  <el-cascader
    v-model="region"
    style="width:100%"
    :options="regionData"
    @change="handleRegionChange"
  />
</template>
<script>
import { regionData, TextToCode, CodeToText } from 'element-china-area-data'
export default {
  name: 'RegionSelect',
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      regionData
    }
  },
  computed: {
    region: {
      get() {
        if (this.value && this.value.length > 0) {
          return [TextToCode[this.value[0]].code, TextToCode[this.value[0]][this.value[1]].code, TextToCode[this.value[0]][this.value[1]][this.value[2]].code]
        }
        return []
      },
      set(val) {
        console.log('input-set:', [CodeToText[val[0]], CodeToText[val[1]], CodeToText[val[2]]])
        this.$emit('input', [CodeToText[val[0]], CodeToText[val[1]], CodeToText[val[2]]])
      }
    }
  },
  methods: {
    handleRegionChange(val) {
      this.$emit('change', [CodeToText[val[0]], CodeToText[val[1]], CodeToText[val[2]]])
    }
  }
}
</script>
